<template>
    <div class="list_mode_cp">
        <div class="top">
            <div class="top">
                <el-checkbox :indeterminate="isIndeterminate" v-model="check_All" @change="on_check_all_change"></el-checkbox>
                文件名
            </div>
            <div class="my_divider">
                <el-divider></el-divider>
            </div>
        </div>
        <el-checkbox-group v-model="selection_items" @change="on_selection_change">
            <div class="container">
                <div class="item" 
                    v-for="(item,index) in data_list" 
                    :key="index"
                    @contextmenu.prevent="on_item_contextmenu(item[only_sign],$event)">
                    <div 
                        class="checkbox_bt"
                        :style="{
                            opacity:selection_items.indexOf(item[only_sign])==-1?'':1,
                        }">
                        <el-checkbox
                            size="medium"
                            :label="item[only_sign]">
                            <br>
                        </el-checkbox>
                    </div>
                    <Thumb_item_cp
                        @click.native.stop="on_item(item[only_sign])"
                        :data_obj="item">
                    </Thumb_item_cp>
                </div>
            </div>
        </el-checkbox-group>
        <Contextmenu_two_cp
            v-if="data_type == 'share'"
            v-model="contextmenu_show"
            :offset_x="right_event.clientX || 0"
            :offset_y="right_event.clientY || 0">
        </Contextmenu_two_cp>
        <Contextmenu_one_cp
            v-else
            v-model="contextmenu_show"
            :offset_x="right_event.clientX || 0"
            :offset_y="right_event.clientY || 0">
        </Contextmenu_one_cp>
    </div>
</template>

<script>
import Contextmenu_one_cp from '@/components/public_cp/contextmenu_one'
import Thumb_item_cp from '@/components/public_cp/thumb_item'
import Contextmenu_two_cp from '@/components/public_cp/contextmenu_two'
export default {  //文件缩略图显示
    name: 'List_mode_cp',
    components:{Contextmenu_one_cp,Thumb_item_cp,Contextmenu_two_cp},
    props:{
        data_type:{ //数据的类型，默认为普通，可以为share(分享的数据)
            type:String,
            default:'',
        },
        data_list:{ //数据
            type:Array,
            default:()=>{
                return [];
            },
        },
        only_sign:{ //用来确定那个属性是唯一标识
            type:String,
            default:'fileName',
        },
    },
    data(){
        return{
            check_All: false, //是否全选
            isIndeterminate: false, //全选按钮的样式
            selection_items:[], //已选择的文件 唯一标识
            right_event:{}, //右击事件对象
            contextmenu_show:false, //控制右击目录的显示
        };
    },
    watch:{
        selection_items(){ //当已选择项发生改变时
            let checkedCount = this.selection_items.length;
            this.check_All = checkedCount === this.data_list.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.data_list.length;
            //根据 唯一标识 找出相应对象
            let selection_files = this.selection_items.map(item=>{
                let data;
                this.data_list.forEach(_item=>{
                    if(item == _item[this.only_sign]){
                        data = _item;
                    }
                });
                return data;
            });
            this.$store.commit('set_selection_files',selection_files);
        },
        $route(){ //当路由发生变化时清空用户的选择
            this.check_All = false;
            this.selection_items = [];
        },
        '$store.state.update_data'(){ //监听全局更新的状态来决定是否更新文件列表
            this.contextmenu_show = false;
        },
    },
    methods:{
        on_item(only_sign){ //某一项点击事件
            this.contextmenu_show = false;
            const index = this.selection_items.indexOf(only_sign);
            if(index==-1){
                this.selection_items.push(only_sign);
            }else{
                this.selection_items.splice(index,1);
            }
        },
        on_item_contextmenu(only_sign,event){  //莫一项右击点击事件
            this.contextmenu_show = true;
            if(this.selection_items.indexOf(only_sign)==-1){
                this.selection_items.push(only_sign);
            }
            this.right_event = event;
        },
        on_check_all_change(val) { //全选按钮点击触发事件
            this.selection_items = val ? this.data_list.map(item=>item[this.only_sign]) : [];
            this.isIndeterminate = false;
        },
        on_selection_change(value) { //item单选按钮触发事件
            this.selection_items = value;
        },
    },
}
</script>

<style scoped lang='scss'>
.list_mode_cp{
    width: 100%;
    box-sizing: border-box;
    >.top{
        margin-bottom: 20px;
        text-align: left;
        >.top{
            font-size: 13px;
            font-weight: bold;
            line-height: 100%;
            margin-bottom: 20px;
            >*{
                margin-right: 10px;
            }
        }
        >.my_divider{
            padding: 0;
            box-sizing: border-box;
            .el-divider--horizontal{
                margin:0;
            }
        }
    }
    .container{
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
        grid-gap: 20px;
        >.item{
            width:100%;
            height: 200px;
            box-sizing: border-box;
            transition: all 0.2s;
            border-radius: 3px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: relative;
            >.checkbox_bt{
                width: 20px;
                height: 20px;
                position:absolute;
                top: 10px;
                right: 10px;
                opacity: 0;
                transition: all 0.2s;
                background-color: rgba(0, 0, 0, 0.46);
                padding: 5px;
                display:flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                /deep/.el-checkbox__label{ //单选隐藏label
                    display: none;
                }
            }
            &:hover{
                background-color: #f4f4f4;
                >.checkbox_bt{
                    opacity: 1;
                }
            }
        }
    }
}
</style>
